<template>
  <div class="edit-profile-page">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
          <div class="card shadow">
            <div class="card-header bg-primary text-white">
              <h2 class="mb-0">编辑个人信息</h2>
            </div>
            <div class="card-body">
              <form @submit.prevent="handleSubmit">
                <div class="mb-3">
                  <label class="form-label">用户ID</label>
                  <input type="text" class="form-control" :value="userInfo.userId" disabled>
                </div>
                <div class="mb-3">
                  <label class="form-label">用户名</label>
                  <input type="text" class="form-control" v-model="userInfo.username" required>
                </div>
                <div class="mb-3">
                  <label class="form-label">新密码</label>
                  <input type="password" class="form-control" v-model="userInfo.newPassword" placeholder="如不修改密码请留空">
                </div>
                <div class="d-flex gap-2">
                  <button type="submit" class="btn btn-primary flex-grow-1">
                    保存修改
                  </button>
                  <button type="button" class="btn btn-secondary" @click="goBack">
                    返回
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'EditProfileView',
  data() {
    return {
      userInfo: {
        userId: localStorage.getItem('userId'),
        username: '',
        newPassword: ''
      }
    }
  },
  async created() {
    try {
      // 获取用户信息
      const response = await axios.get(`http://localhost:8080/users/selectById/${this.userInfo.userId}`);
      if (response.data.code === '200') {
        const userData = response.data.data;
        this.userInfo = {
          ...this.userInfo,
          username: userData.username
        };
      }
    } catch (error) {
      console.error('获取用户信息失败:', error);
    }
  },
  methods: {
    async handleSubmit() {
      try {
        const updateData = {
          userId: this.userInfo.userId,
          username: this.userInfo.username
        };
        
        // 如果输入了新密码，则添加到更新数据中
        if (this.userInfo.newPassword) {
          updateData.password = this.userInfo.newPassword;
        }

        const response = await axios.put(`http://localhost:8080/users/update`, updateData);
        
        if (response.data.code === '200') {
          alert('个人信息更新成功！');
          this.goBack();
        } else {
          alert(response.data.msg || '更新失败，请重试');
        }
      } catch (error) {
        console.error('更新用户信息失败:', error);
        alert('更新失败，请重试');
      }
    },
    goBack() {
      this.$router.push('/home');
    }
  }
}
</script>

<style scoped>
.edit-profile-page {
  min-height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #0061ff 0%, #ff69b4 100%);
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card {
  border: none;
  border-radius: 15px;
  overflow: hidden;
}

.card-header {
  background: linear-gradient(45deg, #0056b3, #007bff);
  padding: 1.5rem;
}

.card-header h2 {
  font-size: 1.5rem;
  font-weight: normal;
}

.form-control:disabled {
  background-color: #f8f9fa;
}

.btn {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}
</style> 